<template>
  <div>
    <div class="w-full h-full flex items-center justify-center" @click="openUpload">
      <slot></slot>
    </div>
    <el-dialog
      title="系统头像"
      v-model="state.uploadVisible"
      lock-scroll
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      draggable
      align-center
      width="580px"
    >
      <div class="w-full h-[400px]" v-loading="state.loading">
        <el-scrollbar always class="w-full h-full overflow-hidden box-border" ref="scrollbarRef">
          <div class="w-full grid grid-cols-10 gap-y-[4px]">
            <div
              class="w-full flex items-center justify-center h-[50px] cursor-pointer relative"
              v-for="(item, i) in state.images"
              @click="state.tabActive = i"
            >
              <img :id="`system-avatar-${i}`" class="w-[50px] h-[50px]" :src="netPath(item)" />
              <div
                class="bg-[#00000030] absolute top-0 left-0 w-full h-full"
                v-if="state.tabActive == i"
              ></div>
              <div v-if="state.tabActive == i" class="checked">
                <el-icon class="!text-green-600 !text-[16px]"><SuccessFilled /></el-icon>
              </div>
            </div>
          </div>
        </el-scrollbar>
      </div>
      <template #footer>
        <el-button @click="closeUpload">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts">
import { message } from "@/utils/message";
import { netPath } from "@/utils/common";
import { reqUserSystemImage } from "@/api/user";

const state = reactive({
  tabActive: <number | null>null,
  loading: false,
  uploadVisible: false,
  images: <string[]>[]
});
const emit = defineEmits(["update"]);

const getSysImage = async () => {
  try {
    state.loading = true;
    const res = await reqUserSystemImage();
    state.images = res.data;
    state.loading = false;
  } catch (error) {
    state.loading = false;
    console.log(error);
  }
};

const openUpload = () => {
  state.tabActive = null;
  state.uploadVisible = true;
  getSysImage();
};

const closeUpload = () => {
  state.uploadVisible = false;
};
const handleSubmit = async () => {
  if (!state.tabActive) {
    return message.warning("请选择头像");
  }
  nextTick(() => {
    state.uploadVisible = false;
    emit("update", state.images[state.tabActive as number]);
  });
};
</script>
<style scoped>
.checked {
  @apply absolute left-[2px] top-[2px] leading-[0px] w-[16px] h-[16px] bg-[#fff] rounded-[14px];
}
</style>
<style scoped lang="scss">
.tab-content {
  border: 1px solid #e4e7ed;
  border-top: 0;
  margin: 0 10px;
}
.upload-img-box {
  cursor: pointer;
  border-radius: 4px;
  &:hover {
    .upload-img-tools {
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 4px;
      background-color: rgba(0, 0, 0, 0.5);
      .el-icon {
        color: #fff;
        font-size: 20px;
        margin: 0 10px;
      }
    }
  }
}
</style>
